<template>
  <div class="page miniAppManage">
    <mt-popup class="info-modal-popup" v-model="popupVisible">
      <div @click="popupHide" class="zhk-alert_close"></div>
      <div class="content">
        <div class="logo"></div>
        <div class="title">享惠达人</div>
        <div class="desc">收款营销一站式小程序</div>
        <div class="ope-link" @click="linkToDetails">了解详情</div>
      </div>
    </mt-popup>
    <div class="scroll-view">
      <customHeader middleTitle="小程序管理" @rightCallBack="openPop">
        <i class="zhk-list_analyze"></i>
      </customHeader>
      <div class="page-body">
        <div class="top">
          <div class="info">
            <div class="left">
              <div class="logo"></div>
            </div>
            <div class="right">
              <div class="inner-top">
                <div class="name">享惠达人</div>
                <ul class="payType">
                  <li>
                    <i class="zhk-zfb"></i>
                  </li>
                  <li>
                    <i class="zhk-wx"></i>
                  </li>
                </ul>
              </div>
              <div class="status" :class="statusColor()">{{statusFormate()}}</div>
            </div>
          </div>
          <div class="desc">一个神奇的收款营销一站式小程序快来试试吧!</div>
        </div>
        <ul class="ope-list" @click="linkToStore" v-if="status===2">
          <li>
            <span>适用门店</span>
            <div>
              {{storeFormate()}}
              <i class="zhk-list_rarrow"></i>
            </div>
          </li>
        </ul>
      </div>
      <div class="btn-wrap margin-safe-area-bottom">
        <div class="btn" v-if="status===0" @click="miniAppOpe">立即开通</div>
        <div class="btn disable" v-if="status===2" @click="miniAppOpe">停用</div>
        <div class="btn" v-if="status===1" @click="miniAppOpe">开启</div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import { Toast } from "mint-ui";
import jsBridge from "../../tools/jsBridge.js";
import { Popup, MessageBox } from "mint-ui";
Vue.component(Popup.name, Popup);
export default {
  name: "miniAppManage",
  data() {
    return {
      popupVisible: false,
      status: 0,//0：未开通过  1：关闭状态  2：开启状态
      shopList: [],
      checkeShopList: [],
      passShopList: [],
    };
  },
  methods: {
    storeFormate() {
      let v = "";
      if (this.checkeShopList.length === 1) {
        v = this.checkeShopList[0].shopName;
      } else if (this.checkeShopList.length > 0 && this.checkeShopList.length === this.passShopList.length) {
        v = "全部门店";
      } else {
        v = "已选" + this.checkeShopList.length + "家门店";
      }
      return v;
    },
    statusFormate() {
      const status = this.status;
      let f = "";
      if (status === 0) {
        f = "未开通";
      } else if (status === 1) {
        f = "已停用";
      }
      else if (status === 2) {
        f = "已开启";
      }
      return f;
    },
    statusColor() {
      const status = this.status;
      let c = "";
      if (status === 0) {
        c = "unopen";
      } else if (status === 1) {
        c = "disabled";
      }
      else if (status === 2) {
        c = "enable";
      }
      return c;
    },
    //去选门店
    linkToStore() {
      this.$router.push({ path: "/miniAppManage/miniAppManageIntro/StoreChoice" });
    },
    popupHide() {
      this.popupVisible = false;
    },
    //跳转到小程序介绍页
    linkToDetails() {
      this.$router.push({ path: "/miniAppManage/miniAppManageIntro", query: { passCount: this.passShopList.length } });
    },
    //打开介绍弹窗
    openPop() {
      this.popupVisible = true;
    },
    //获取小程序状态
    getStatus() {
      //serviceCode 服务类型：9：小程序；10：会员服务
      this.ajax({
        url: "/applet/manager/queryYzProShopServiceModelByCondition.do?serviceCode=9",
        type: "get",
        controlLoading: true
      })
      .then(res => {
        if (res.success) {
          this.status = res.resultObject;//小程序：0：未开通过  1：关闭状态  2：开启状态 会员服务： 0:关闭 1:开启
          this.popupVisible = res.resultObject === 0 ? true : false;//未开通状态下显示介绍弹窗
          this.getShopList();//停用状态下查询门店数
        } else {
          Toast(res.msg);
        }
      })
      .catch(function (err) {

      });
    },
    //获取开启小程序的门店 queryType 1:获取符合小程序的门店 2：获取开通小程序的门店（包含1）serviceCode 服务类型，9：小程序；10：小程序会员
    getShopList() {
      const url = `/applet/manager/queryCityShopList.do?queryType=${2}&serviceCode=${9}`;
      this.ajax({
        url: url,
        type: "get",
        controlLoading: true
      })
        .then(res => {
          if (res.success) {
            const data = res.resultObject;
            this.checkDataSource(data);
          }
        })
        .catch(function (err) {

        });
    },
    checkDataSource(data) {
      let passShopList = [];
      let checkeShopList = [];
      if (data != null && JSON.stringify(data) != "{}") {
        for (let cityName in data) {
          if (data[cityName] != null && data[cityName].length > 0) {
            for (let i = 0; i < data[cityName].length; i++) {
              //未开通小程序或者不满足条件的门店（mini：已开通小程序 true:开通；  passMini：符合小程序开通 true:符合 false:不符合）
              if (data[cityName][i]['mini']) {
                checkeShopList.push({ shopId: data[cityName][i]['shopId'], shopName: data[cityName][i]['shopName'] });
              }
              if (data[cityName][i]['passMini']) {
                passShopList.push({ shopId: data[cityName][i]['shopId'], shopName: data[cityName][i]['shopName'] });
              }
            }
          }
        }
      }
      this.checkeShopList = checkeShopList;
      this.passShopList = passShopList;
    },
    //操作按钮
    miniAppOpe() {
      if (this.status === 2) {
        MessageBox({
          title: "",
          message: "停用后将无法继续获取会员信息，确认停用？",
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        }).then(action => {
          if (action === "confirm") {
            this.stopMiniApp();
          }
        });
      } else {
        if (this.passShopList.length) {
          this.linkToStore();
        } else {
          MessageBox({
            title: "提示",
            message: "没有符合开通条件的门店，请联系销售人员获取资格",
            showCancelButton: false,
            confirmButtonText: "知道了",
          }).then(action => {
            if (action === "confirm") {
            }
          });
        }
      }
    },
    //停用
    stopMiniApp() {
      this.ajax({
        url: `/applet/manager/updateShopService.do`,
        type: "post",
        data: { shopIds: [] },
        controlLoading: true,
      })
        .then(response => {
          if (response && response.success) {
            this.getStatus();
            Toast('操作成功');
          } else {
            Toast(response.msg);
          }
        })
        .catch(function (err) {

        });
    }
  },
  components: {
    customHeader
  },
  created() {
    this.getStatus();
  }
};
</script>
<style lang='scss' scoped>
@import "miniAppManage";
</style>
